Google Maps API এর Place Autocomplete এবং Place Suggestions দুটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের তাদের কাঙ্ক্ষিত স্থান বা ঠিকানা দ্রুত খুঁজে পেতে সাহায্য করে। Place Autocomplete ব্যবহারকারীদের টাইপ করার সঙ্গে সঙ্গে সম্ভাব্য স্থানগুলির প্রস্তাবনা দেখায়, যা তাদের দ্রুত এবং সঠিকভাবে জায়গা নির্বাচন করতে সহায়তা করে। এটি বিশেষত ফর্ম পূরণের জন্য বা ওয়েব এবং মোবাইল অ্যাপ্লিকেশনগুলিতে ব্যবহার হয়।
Place Autocomplete এবং Place Suggestions কী?
- Place Autocomplete:
Google Maps Place Autocomplete একটি ইনপুট ফিল্ড বা সার্চ বক্সে ব্যবহারকারীর টাইপ করা টেক্সট অনুযায়ী সম্ভাব্য স্থানগুলির (addresses, cities, landmarks, etc.) একটি তালিকা প্রদর্শন করে। এটি ব্যবহারকারীর টাইপ করা শব্দ অনুযায়ী সঠিক এবং দ্রুত প্রস্তাবনা (suggestions) দেয়। - Place Suggestions:
Place Suggestions ব্যবহারকারীদের সম্ভাব্য স্থানের প্রস্তাবনা দেখায়, যা গুগল ম্যাপস এর ডাটাবেসে রয়েছে। এটি সাধারণত autocomplete ফিচারের একটি অংশ হিসেবে কাজ করে, তবে প্রস্তাবনাগুলি স্থান, শহর, রেস্টুরেন্ট, শপিং মল, হোটেল ইত্যাদি হতে পারে।
Place Autocomplete ব্যবহার করার পদক্ষেপ
Google Maps API ব্যবহার করে Place Autocomplete এবং Place Suggestions ফিচার যোগ করার জন্য নিচে HTML এবং JavaScript কোড দেখানো হলো।
1. API Key তৈরি করা:
- গুগল ক্লাউড কনসোলে গিয়ে একটি API Key তৈরি করতে হবে এবং Places API এবং Maps JavaScript API সক্রিয় করতে হবে।
2. HTML এবং JavaScript কোড তৈরি করা:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
<style>
#autocomplete {
width: 300px;
height: 30px;
padding: 5px;
margin: 20px;
}
</style>
</head>
<body>
<h3>Place Autocomplete Example</h3>
<input id="autocomplete" placeholder="Enter a place" type="text" />
<script>
// Place Autocomplete ইনিশিয়ালাইজ করা
function initAutocomplete() {
// Input ফিল্ড যেখানে Autocomplete কার্যকর হবে
var input = document.getElementById('autocomplete');
// Place Autocomplete তৈরি করা
var autocomplete = new google.maps.places.Autocomplete(input);
// Autocomplete এর জন্য একটি Listener যোগ করা
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
// স্থান নির্বাচন হলে, এই কোডে প্লেসের নাম ও অন্যান্য তথ্য পাওয়া যাবে
if (place.geometry) {
console.log("Selected Place: " + place.name);
console.log("Latitude: " + place.geometry.location.lat());
console.log("Longitude: " + place.geometry.location.lng());
} else {
console.log("No place details available.");
}
});
}
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Google Maps API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete">এই স্ক্রিপ্টেlibraries=placesপ্যারামিটারটি যোগ করা হয়েছে, যাতে Places API ব্যবহার করা যায়।YOUR_API_KEYএর জায়গায় আপনার API Key বসাতে হবে।
- Autocomplete ইনপুট ফিল্ড:
<input id="autocomplete" placeholder="Enter a place" type="text" />এই ইনপুট ফিল্ডটি ব্যবহারকারীর স্থান লিখতে ব্যবহৃত হবে।
- initAutocomplete ফাংশন:
google.maps.places.Autocomplete(input)ব্যবহার করে Place Autocomplete তৈরি করা হয়েছে, যা ইনপুট ফিল্ডে ব্যবহারকারীর টাইপ করা ডেটার সাথে মিল রেখে প্রস্তাবনা প্রদর্শন করবে।
- Place Changed Listener:
autocomplete.addListener('place_changed', function() {...})ব্যবহার করে, যখন ব্যবহারকারী একটি স্থান নির্বাচন করবে, তখন সেই স্থানটির বিস্তারিত তথ্য (যেমন নাম, latitude, longitude) পাওয়া যাবে।
Place Suggestions কিভাবে কাজ করে?
Place Suggestions হল Autocomplete ফিচারের একটি অংশ যা ব্যবহারকারীর ইনপুট অনুযায়ী সঠিক স্থান প্রদর্শন করে। যখন ব্যবহারকারী একটি শব্দ টাইপ করতে শুরু করে, তখন গুগল ম্যাপস তার ডাটাবেস থেকে সেরা মিলগুলির একটি তালিকা প্রদান করে, যেমন:
- শহরের নাম
- জনপ্রিয় স্থান (landmarks)
- রেস্টুরেন্ট, হোটেল বা দোকান
এভাবে Place Autocomplete ফিচারটি ব্যবহারকারীদের টাইপ করা শব্দের সঙ্গে সম্পর্কিত স্থান খুঁজে বের করতে এবং সঠিক স্থান নির্বাচন করতে সহায়তা করে।
সারাংশ
Google Maps এর Place Autocomplete এবং Place Suggestions ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপে একটি শক্তিশালী স্থান অনুসন্ধান সিস্টেম তৈরি করতে পারেন। ব্যবহারকারীরা যখন কোনও স্থান টাইপ করেন, তখন গুগল ম্যাপস তাদের সঠিক প্রস্তাবনা প্রদান করে, যা দ্রুত এবং সহজে গন্তব্য নির্বাচন করতে সাহায্য করে। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং সঠিক তথ্য প্রদান করে।
Read more
